<template>
	<div>
		<div class="head">
			<div class="title">
				LK 活动平台
			</div>
			<div class="user">
				<img src="http://jiuye-res.jikexueyuan.com/zhiye/showcase/attach-/20170704/914408a9-afc8-4aaf-8ff3-f7a2497bfeba.png" alt="用户头像">
				<div class="name">youjie</div>
				<a href="#">注销</a>
			</div>
		</div>
		<div class="home-content">
			<div class="left">
				<el-row class="tac">
				  <el-col :span="24">
				    <el-menu
				      :default-active="$route.path"
				      class="el-menu-vertical-demo"
				      router
				      @open="handleOpen"
				      @close="handleClose">
						
					  <el-menu-item index="/summary">
				        <i class="el-icon-menu"></i>
				        <span slot="title">概述</span>
				      </el-menu-item>

				      <el-submenu index="/1">
				        <template slot="title">
				          <i class="el-icon-location"></i>
				          <span>活动管理</span>
				        </template>
				        <el-menu-item-group>
				          <el-menu-item index="/activity">活动列表</el-menu-item>
				          <el-menu-item index="/activity/add">发布活动</el-menu-item>
				          <el-menu-item index="/activity/city">支持城市</el-menu-item>
				        </el-menu-item-group>
				      </el-submenu>

				      <el-submenu index="/category">
				        <template slot="title">
				          <i class="el-icon-location"></i>
				          <span>活动分类</span>
				        </template>
				        <el-menu-item-group>
				          <el-menu-item index="/category">分类列表</el-menu-item>
				          <el-menu-item index="/category/add">添加</el-menu-item>
				        </el-menu-item-group>
				      </el-submenu>

				      <el-submenu index="/volunteer">
				        <template slot="title">
				          <i class="el-icon-location"></i>
				          <span>志愿者管理</span>
				        </template>
				        <el-menu-item-group>
				          <el-menu-item index="/volunteer">志愿者列表</el-menu-item>
				          <el-menu-item index="/volunteer/auditing">审核</el-menu-item>
				          <el-menu-item index="/volunteer/jobs">职位</el-menu-item>
				        </el-menu-item-group>
				      </el-submenu>

				      <el-menu-item index="/user">
				        <i class="el-icon-menu"></i>
				        <span slot="title">用户管理</span>
				      </el-menu-item>

				      <el-menu-item index="4" disabled>
				        <i class="el-icon-document"></i>
				        <span slot="title">导航三</span>
				      </el-menu-item>
				      
				    </el-menu>
				  </el-col>
				</el-row>
			</div>
			<div class="right">
				 <transition name="el-zoom-in-top">
					<router-view></router-view>
				</transition>
			</div>
		</div>
		<div class="footer">
			
		</div>
	</div>
</template>

<script>
	// @ 是 /src 的别名
	export default {
		name: 'Home',
		props: {

		},
		data() {
			return {

			}
		},methods: {
	      handleOpen(key, keyPath) {
	        console.log(key, keyPath);
	      },
	      handleClose(key, keyPath) {
	        console.log(key, keyPath);
	      }
	    }
	}
</script>

<style scoped lang="styl">
	@import "../assets/css/base"

	page{
		text-decoration
	}
	.head
		background $Primary
		padding 0px 0 20px
		.title
			height 100px
			color #fff
			margin-bottom 20px
			font-size 40px
			text-align center
			line-height 150px
		.user
			display flex;
			justify-content flex-end
			align-items center
			img 
				width 60px
				height 60px
				border-radius 30px	
			.name
				margin 0 0px 0 20px
				color #fff
				font-size 25px
			a
				border none
				outline none
				padding 10px 20px
				color #fff
				background $Primary
				text-decoration none
			


	.footer
		padding 60px 0
		background #2F2F2F

	.home-content 
		display flex 
		width 1250px
		min-height 100vh
		margin 0 auto 
		.left
			width 250px
		.right
			width 1000px
			padding 25px 0 25px 25px
			
</style>
